<!--  -->
<template>
  <div class="content">
    <div class="header">
      <my-header></my-header>
    </div>
    <div class="navbar">
      <my-navbar class="navbarone"></my-navbar>
    </div>
    <div class="swiper">
      <my-swiper></my-swiper>
    </div>

    <div class="list">
      <p class="title">{{ contentTitle }}</p>
      <p class="body">{{ contentBody }}</p>
    </div>

    <div class="article" style="height: 50px;">
      <my-article newsTitle="友情链接" newsType="" style="height: 430px;color:rgb(80, 150, 255);font-weight: bold;width: 56%;">
      </my-article>
    </div>
    <div class="link" style="height: 150px;">
      <my-link></my-link>
    </div>
    <div class="footer" style="height: 100px;">
      <my-footer></my-footer>
    </div>
  </div>
</template>

<script>
import header from "../../components/header/header.vue"
import navbar from "../../components/navbar/navbar.vue"
import swiper from "../../components/swiper/swiper.vue"
import article from "../../components/article/article.vue"
import footer from "../../components/footer/footer.vue"
import link from "../../components/link/link.vue"
export default {
  components:{
    "my-header":header,
    "my-navbar":navbar,
    "my-swiper":swiper,
    "my-article":article,
    'my-footer':footer,
    "my-link":link,
  },
  data () {
    return {
      contentItems: [
        '《面向对象程序设计》课程思政建设的研讨活动',
        '武汉软件工程职业学院计算机与信息学院',
        '我院开展2023届毕业设计（论文）答辩工作',
        '移动互联网软件工程方向PI团队五月活动',
        '机械工程学院关于公布第十四届创业大赛结果的 通知',
        '机械工程学院2023年职业教育活动周 学生技能节获奖学生公示',
        '全国三维数字化创新设计大赛华中四省赛区启动会顺利召开'
      ],
      contentTitle: "",
      contentBody: "",
    }
  },
  created() {
    const id = this.$route.params.id;
    if (id >= 0 && id < this.contentItems.length) {
      this.contentTitle = this.contentItems[id];
      // 假设这里的 contentBody 是静态的，也可以是通过异步请求获取到的动态数据
      this.contentBody = "这里是 " + this.contentTitle + " 的详情内容";
    }
  },
}
</script>

<style  scoped>
.article{
  display: flex;
}
.link{
  display: flex;
  justify-content: center;
}
.list .title {
  font-size: 24px;
  color: rgb(175, 33, 33);
  margin-bottom: 12px;
}

.body {
  font-size: 18px;
  color: #666;
  line-height: 1.5;
}
</style>
